<template>
  <div class="order_catchyz">
    <!-- <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：生产管理>抓单管理>有赞抓单</div>
    <div style="height: 16px; width: 100%; background: #F9F9F9;"></div>
 -->
    <div class="team">
      <div class="powertop">
        <top></top>
      </div>
      <div class="centerall">
        <div class="t-img" style="background:#2974FF;padding: 20px 40px;">
          <!-- <img src="../../../static/img/catchjd.png"> -->
          <div style="height: 40px;background-color: #F6F6F6;width: 122px;border-radius: 20px;text-align: center; ">
            <img src="../../../static/kuanping/xhs.png" style="height: 100%;" >
          </div>

          <!-- <span class="t-email" @click="mobileshow">设置短信报警</span>
          <span class="t-email" style="right: 140px;" @click="biaoqishezhi">订单标旗设置</span> -->
        </div>
        <div class="t-con" v-loading="loading">
          <el-table :data="list" border  style="width: 100%">
              <el-table-column  prop="redbook_name"  label="聚光账号"  align="center"> </el-table-column>
              <el-table-column  prop="redbook_account"  label="投放账号ID "  align="center"> </el-table-column>
              <el-table-column  prop="created_at"  label="配置时间"  align="center"> </el-table-column>
              <el-table-column  label="回调链接"  align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.url }}</span>
                  <el-button type="text" @click="copy(scope.row.url)">复制</el-button>
                </template>
              </el-table-column>
              <el-table-column  label="操作"  align="center">
                <template slot-scope="scope">
                  <el-button @click="delbtn(scope.row.id)" type="text">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div style="margin: 20px 0;">
            <el-button @click="xiazai" type="text">小红书抓单流程下载</el-button>
            <el-button style="margin-left: 50px;" @click="xiazai2" type="text">敢探号地址库下载</el-button>
          </div>
     
         
          <div class="addshop">
            <el-button type="danger" round @click="addshplog "><i class="el-icon-plus"></i>新增回调账号</el-button>
          </div>

        </div>
      </div>
    </div>
    

    
    
   <!-- 新增 -->
   <el-dialog
      title="新增回调账号"
      :visible.sync="isshowadd"
      width="500px"
      center="true"
      :close-on-click-modal="false"
      >
      <div>
        <el-input style="width: 100%;" v-model="inputacc" placeholder="输入聚光账号"></el-input>
        <el-input style="width: 100%;margin-top: 20px;margin-bottom: 30px;" v-model="inputid" placeholder="输入聚光ID"></el-input>
      </div>
      <div style="text-align: center;">
        <el-button round type="info" @click="isshowadd = false">取 消</el-button>
        <el-button round type="danger" @click="sureadd">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/productionManagement/Azujian/nav.vue'
  export default {
    components:{
      top
    },
    name: "order_catchxhs",
    data() {
      return {
        loading: true,
        list: "",
        url:'',
        isshowadd:false,
        inputacc:'',
        inputid:''



      }
    },
    created() {
      //地址配置,用于下载模板
      if(window.location.href.indexOf("91haoka_platform") > -1){
            	console.log("线上项目，谨慎操作。")
            	this.url = window.location.origin+"/91haoka_platform/"
            }else{
            	this.url = ""
			}
      this.getlist();
    },
    mounted() {

    },
    methods: {
      
     
      getlist: function() {
        var that = this
        axios.get('/api/plan-market/shop/redbook/account/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              if (response.data.data != '') {
                
                that.list = response.data.data
                
                that.loading = false
              } else {
                that.loading = false
              }

            } else {
              that.$message.error(response.data.msg.info);
            }

          })
      },
      copy: function(t) {
        var that = this;
        this.$copyText(t).then(res => {
            that.$message.success("复制成功");
            });
      },
      //删除
      delbtn(id){
        this.$confirm('是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {


          axios.post('/api/plan-market/shop/del/redbook/account',{
            id:id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.loading = true
              this.getlist();

            } else {
              that.$message.error(response.data.msg.info);
            }

          })


          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //下载
      xiazai:function(){

        const a = document.createElement('a');
        a.setAttribute('download', '小红书抓单流程.pdf');
        a.setAttribute('href', this.url+'static/xhs.pdf');
        a.click();

      },
      xiazai2:function(){

        const a = document.createElement('a');
        a.setAttribute('download', '敢探号地址库.xlsx');
        a.setAttribute('href', this.url+'static/gthdzk.xlsx');
        a.click();

      },
      //新增
      addshplog(){
        this.isshowadd = true
        this.inputacc = ''
        this.inputid = ''
      },
      //提交
      sureadd(){
        if(this.inputacc==''){
          this.$message.error('输入聚光账号');
          return
        }
        if(this.inputid==''){
          this.$message.error('输入聚光ID');
          return
        }


        axios.post('/api/plan-market/shop/add/redbook/account',{
            name:this.inputacc,
            account:this.inputid
            
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.isshowadd = false
              this.loading = true
              this.getlist()

            } else {
              that.$message.error(response.data.msg.info);
            }

          })


       
      }
   
    },
  }
</script>
<style  scoped>


</style>
<style lang="scss" scoped>
  .order_catchyz {
    @keyframes hua {
      0% {
        padding-left: 0px
      }

      100% {
        padding-left: 30px
      }
    }

    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    /deep/ .el-button--danger.is-plain {
        color: #EEF7FF !important;
        background: #EEF7FF !important;
        border-color: #18A0FB !important;
    }

    .autotidan {
      display: flex;
      margin-top: 20px;

      .xin {
        flex-basis: 50px;

        .xins {
          color: #DD2727;
          animation: hua 2s infinite;
        }
      }

      .check {
        flex-basis: 200px
      }

      .see {
        flex-basis: 100px;
        color: #409EFF;
        cursor: pointer;
      }
    }

    .team {
      background: #F9F9F9;

      .powertop {
        display: flex;
        width: 640px;
      }

      .powertopli {
        flex-basis: 160px;
        line-height: 45px;
        border-top: 4px #F9F9F9 solid;
        color: #727272;
        font-size: 14px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-top: 4px #DD2727 solid;
      }

      .centerall {
        padding: 20px;
        background: #FFFFFF;
        color: #666;

        .t-img {
          margin-bottom: 20px;
          position: relative;


          .t-email {
            position: absolute;
            background: #FFFFFF;
            color: #DD2727;
            right: 20px;
            padding: 8.5px 15px;
            border-radius:20px;
            top: 23px;
            margin-right: 10px;
            cursor: pointer;
          }
        }

        .t-con {

          .list {
            display: flex;
            text-align: center;
            color: #727272;
            line-height: 45px;
            border-top: 1px #EAEAEA solid;
            border-bottom: 1px #EAEAEA solid;
            margin-top: -1px;

            .th {
              flex: 1;
              background: #F9F9F9;
              font-size: 14px;
              border-right: 1px #EAEAEA solid;
            }

            .td {
              flex: 1;
              font-size: 14px;
              border-right: 1px #EAEAEA solid;
            }

            .td2 {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
            }


          }

          .el-pagination {
            text-align: right;
            margin: 20px 0
          }

          .addshop {
            text-align: center;
            padding: 20px 0;
          }
        }

        .getcookie {
          background: #F8F8F8;
          padding: 20px;
          line-height: 30px;
          margin-top: 40px;
          border: 1px #e6e6e6 solid;

          .getflex {
            display: flex;
            justify-content: space-between;
            width: 750px;
            margin: 0 auto;
            margin-top: 50px;

            .getxian {
              height: 25px;
              border-bottom: 1px #D5D5D5 solid;
              flex-basis: 280px;
            }

            .getflexli {
              flex-basis: 50px;
              text-align: center;
              z-index: 2;

              .getflexlix {
                background: #D5D5D5;
                line-height: 50px;
                border-radius: 25px;
                width: 50px;
              }
            }
          }

          .getflex2 {
            display: flex;
            justify-content: space-between;
            width: 950px;
            margin: 20px auto;

            .getflexli2 {
              width: 240px;
              text-align: center;

              .getflexli2title {
                font-size: 16px;
              }

              .getflexli2content {
                font-size: 14px;
              }
            }
          }

          .blue a {
            color: #409EFF;
            cursor: pointer
          }
        }
      }
    }

    .cookiechange {
      margin-left: 5px;
      cursor: pointer;
    }

  }
</style>
